<template>
  <el-dialog
    title="添加设备类型"
    :visible.sync="dialogVisible"
    width="600px"
  >
    <el-form
      @keyup.enter.native="add"
      ref="addSearchForm"
      :model="searchForm"
      :label-width="formLabelWidth"
      :show-message="false"
    >
      <el-form-item
        prop="name"
        label="设备类型名称"
        required
      >
        <el-input
          class="input"
          v-model="searchForm.name"
          auto-complete="off"
          placeholder="请输设备类型名称"
        ></el-input>
      </el-form-item>
      <el-form-item
        prop="description"
        label="设备类型描述"
      >
        <el-input
          class="input"
          v-model="searchForm.description"
          auto-complete="off"
          placeholder="请输设备类型描述"
        ></el-input>
      </el-form-item>
      <el-form-item
        prop="imageUrl"
        label="图片"
      >
        <!-- <el-input
          class="input"
          v-model="searchForm.imageUrl"
          auto-complete="off"
        ></el-input> -->
        <!-- <image-upload v-model="searchForm.imageUrl"></image-upload> -->
        <image-upload
          class="image-upload-box"
          v-model="searchForm.imageUrl"
        ></image-upload>
        <div
          v-if="searchForm.imageUrl"
          class="remove-btn-box"
        >
          <el-button
            type="text"
            class="remove-btn"
            @click="removeImage"
            icon="el-icon-delete"
          >
          </el-button>
        </div>
      </el-form-item>
      <el-form-item
        prop="deviceParameterList"
        label="设备参数"
        required
      >
        <el-select
          class="input"
          v-model="searchForm.deviceParameterList"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请选择"
          :remote-method="remoteParameterSearch"
          :loading="remoteLoading"
          value-key="id"
          @focus="remoteParameterSearch()"
          clearable
        >
          <el-option
            class="input"
            v-for="parameter in parameterList"
            :key="parameter.id"
            :label="parameter.label"
            :value="parameter"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        prop="defaultDeviceParameterId"
        label="默认设备参数"
        required
      >
        <el-select
          class="input"
          v-model="searchForm.defaultDeviceParameterId"
          placeholder="请选择"
        >
          <el-option
            class="input"
            v-for="parameter in searchForm.deviceParameterList"
            :key="parameter.id"
            :label="parameter.label"
            :value="parameter.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        prop="active"
        label="是否启用"
        required
      >
        <el-select
          class="input"
          v-model="searchForm.active"
        >
          <el-option
            class="input"
            v-for="item in optionStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="add"
        :loading="btnLoading"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import ImageUpload from '../../../components/ImageUpload';
import { validateForm } from './service';
import { Message } from 'element-ui';
import { parseError } from '../../../utils/index';
import { createDeviceTypeApi } from '../../../api/deviceType';
import { queryDeviceParameterListApi } from '../../../api/deviceParameter';

export default {
  components: {
    ImageUpload
  },
  data() {
    this.formLabelWidth = '120px';
    return {
      optionStatus: [
        {
          value: true,
          label: '启用'
        },
        {
          value: false,
          label: '不启用'
        }
      ],
      parameterList: [],
      dialogVisible: false,
      remoteLoading: false,
      btnLoading: false,
      searchForm: {
        name: '',
        description: '',
        imageUrl: '',
        active: true,
        deviceParameterIdList: [],
        defaultDeviceParameterId: '',
        deviceParameterList: []
      }
    };
  },
  watch: {
    dialogVisible: {
      handler(value) {
        if (!value) this.$refs.addSearchForm.resetFields();
      }
    }
  },
  methods: {
    removeImage() {
      this.searchForm.imageUrl = '';
    },
    showDialog() {
      this.dialogVisible = true;
    },
    add() {
      const validError = validateForm(this.searchForm);
      if (validError) return Message.warning(validError);
      this.btnLoading = true;
      createDeviceTypeApi(
        this.searchForm.name,
        this.searchForm.description,
        this.searchForm.imageUrl,
        this.searchForm.active,
        this.searchForm.deviceParameterList.map(parameter => parameter.id),
        this.searchForm.defaultDeviceParameterId
      )
        .then(res => {
          Message.success('添加成功');
          this.dialogVisible = false;
          this.$emit('refresh');
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.btnLoading = false));
    },
    remoteParameterSearch(query) {
      this.remoteLoading = true;
      queryDeviceParameterListApi(query, 10)
        .then(
          parameterList =>
            (this.parameterList = parameterList.map(parameter => {
              return {
                id: parameter.id,
                label: `${parameter.display_name}(${parameter.name})`
              };
            }))
        )
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    }
  }
};
</script>

<style lang="scss" scoped>
.input {
  width: 300px;
}
/deep/.el-icon-delete {
  font-size: 20px;
  color: red;
}
// .image-upload-box {
//   position: relative;
//   border: 1px solid red;
// }

/deep/.image-upload-box {
  border: 1px solid red;
  margin-bottom: 30px;
}
.remove-btn-box {
  width: 178px;
  height: 178px;
  background: rgba($color: #000000, $alpha: 0);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  top: 0;
  .remove-btn {
    display: none;
  }
}
.remove-btn-box:hover {
  background: rgba($color: #000000, $alpha: 0.3);
  .remove-btn {
    display: block;
  }
}
</style>
